<!-- 新闻 -->
<template>
  <div class="news">
    <!-- 头部 -->
    <Header />
    <!-- 新闻 -->
    <div class="news_img">
      <img :src="baseURL + img" alt="" />
    </div>
    <!-- 专家博客 -->
    <div class="blow" v-if="this.type == 16">
      <div class="title1"><p>专家博客</p></div>
      <div
        class="news_list"
        v-for="(item, index) in getInformation.data"
        :key="index"
      >
        <div class="news_list_item">
          <div class="news_list_item_left" v-html="item.content"></div>
          <div class="news_list_item_right">
            <div class="img">
              <img :src="baseURL + item.image" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="paging">
        <van-pagination
          v-model="currentPage"
          :page-count="pageCount"
          @change="change1(currentPage)"
        />
      </div>
    </div>
    <!-- 公司新闻 -->
    <div v-if="this.type == 14">
      <div class="contentBox">
        <div class="title">{{ title }}</div>
        <div
          class="newsItem newsItem1"
          v-for="(item, index) in getInformation.data"
          :key="index"
          v-html="item.content"
        ></div>
      </div>
      <div class="paging">
        <van-pagination
          v-model="currentPage"
          :page-count="pageCount"
          @change="change1(currentPage)"
        />
      </div>
    </div>
    <!-- 热点关注 -->
    <div v-if="this.type == 15">
      <div class="contentBox">
        <div class="title">{{ title }}</div>
        <div
          class="newsItem"
          v-for="(item, index) in getInformation.data"
          :key="index"
          v-html="item.content"
        ></div>
      </div>
      <div class="paging">
        <van-pagination
          v-model="currentPage"
          :page-count="pageCount"
          @change="change1(currentPage)"
        />
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="footer_top">
        <div class="footer_item">
          <div class="footer_box" v-for="(item, index) in about" :key="index">
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="footer_middle">
        <div class="footer_middle_top">
          <div class="footer_middleTop_font">友情链接:</div>
          <a href="http://www.jd.com">京东</a>
          <a href="http://www.baidu.com">百度</a>
          <a href="http://www.taobao.com">淘宝</a>
        </div>
        <div class="footer_middle_middle">
          Copytight © <a href="">www.zhongchuangzixun.com,</a> 2014.
          中创咨询有限公司 版权所有
        </div>
        <div class="footer_middle_bottom">
          <a href=""
            >地址: 北京朝阳区 北苑路86号院(嘉铭桐城)E区213号楼一致三层
            <a href="https://beian.miit.gov.cn">京ICP备06033816号</a>
            技术支持:中创咨询</a
          >
        </div>
      </div>
      <div class="footer_about">
        <div class="bottom-left">
          <div class="phone icon1">
            <van-icon name="phone-o" color="#afafaf" />
            <span>电话：{{ companyMsg.phone }}</span>
          </div>
          <div class="phone icon2">
            <van-icon name="location-o" color="#afafaf" />
            <span>{{ companyMsg.address }}</span>
          </div>
        </div>
        <div class="bottom_right">
          <img :src="baseURL + companyMsg.codeimage" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pagin from "../components/pagin.vue";
import { getInformation, getCompany, getCompanyMsg } from "../api/index/index";
export default {
  data() {
    return {
      pageCount: 1,
      currentPage: 1,
      //公司新闻
      getInformation: {},
      //底部信息
      companyMsg: {},
      about: [],
      img: "",
      title: "",
      swiperImg: [],
      type: "",
      baseURL: this.$store.state.baseURL,
    };
  },
  mounted() {
    var vm = this;

    vm.type = vm.$route.query.id;
    console.log(this.type);
    //8.27
    vm.allMethod();
  },
  methods: {
    allMethod() {
      var vm = this;
      vm.getCompany();
      vm.getCompanyMsg();
      // 公司新闻
      if (vm.type == 14) {
        vm.information1({ id: 14, page: vm.currentPage });
      }
      // 热点关注
      if (vm.type == 15) {
        vm.information1({ id: 15, page: vm.currentPage });
      }
      // 专家博客
      if (vm.type == 16) {
        vm.information1({ id: 16, page: vm.currentPage });
      }
    },
    // 公司信息
    async getCompany() {
      let vm = this;
      const res = await getCompany();
      console.log(res, "公司信息");
      vm.companyMsg = res.data.data;
    },
    //底部数据
    async getCompanyMsg() {
      let vm = this;
      const res = await getCompanyMsg();
      console.log(res, "底部数据");
      vm.about = res.data.data;
    },
    //公司新闻
    async information1(params) {
      let vm = this;
      if (params.id == 16) {
        //专家博客
        const res = await getInformation(params);
        console.log(res, "专家博客");
        vm.getInformation = res.data.data.article;
        vm.title = vm.getInformation.data[0].title;
        vm.img = res.data.data.image;
        console.log(vm.getInformation);
        //总页数
        vm.pageCount = Math.ceil(vm.getInformation.total / 4);
      } else {
        // 公司新闻与热点关注
        const res = await getInformation(params);
        console.log(res, "公司新闻");
        vm.getInformation = res.data.data.article;
        vm.title = vm.getInformation.data[0].title;
        vm.img = res.data.data.image;
        console.log(vm.getInformation);
        //总页数
        vm.pageCount = Math.ceil(vm.getInformation.total / 4);
      }
    },
    // 分页页码发生变化回调
    change1(index) {
      var vm = this;
      console.log(index);
      vm.currentPage = index;
      this.allMethod();
    },
  },
  watch: {
    // 利用watch方法检测路由变化：
    $route: function (to, from) {
      this.type = to.query.id;
      this.allMethod();
      location.reload();
    },
  },
  components: {
    pagin,
  },
};
</script>

<style lang="less" scoped>
// footer
@import url("../assets/css/footer.css");
// 公司新闻样式
@import url("../assets/css/news.css");
// 热点关注样式
@import url("../assets/css/hot.css");
// 专家博客样式
@import url("../assets/css/blow.css");

// 按钮样式
.paging {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: cnter;
}
/deep/.van-pagination__item--active {
  /deep/.van-pagination__item--active {
    background-color: #c4181f !important;
  }
}
/deep/.van-pagination__item {
  box-sizing: border-box;
  width: 50px;
  min-width: 36px;
  height: 40px;
  // color: #c4181f;
  background-color: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

// 轮播
.my-swipe .van-swipe-item {
  img {
    width: 100%;
    height: 180px;
  }
}
.news_img {
  img {
    width: 100%;
    height: 180px;
  }
}
h3 {
  font-size: 18px;
  line-height: 27px;
  color: #c4181f;
  margin-left: 16px;
  margin-top: 25px;
}
// 新闻
.news_list {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: wrap;

  .news_list_item {
    width: 341px;
    height: 99px;
    // margin-left: 16px;
    margin-top: 15px;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    border-top: 1px solid #e9e9e9;
    .news_list_item_left {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 7;
      .title {
        margin-top: 20px;
        span {
          font-size: 12px;
          line-height: 18px;
          color: #333333;
        }
      }
      .text {
        margin-top: 6px;
        span {
          font-size: 10px;
          line-height: 15px;
          color: #868686;
          // margin-top: 6px;
        }
      }
      .time {
        margin-top: 6px;
        span {
          font-size: 10px;
          line-height: 15px;
          color: #868686;
        }
      }
    }
    .news_list_item_right {
      .img {
        margin-left: 27px;
        margin-top: 20px;
        img {
          width: 99px;
          height: 60px;
        }
      }
    }
  }
  .van-pagination {
    margin-left: 100px;
    font-size: 12px;
    color: #a7a7a7;
  }
}
</style>